<template>
  <div class="app-container">
    <!-- 联系人列表组件 -->
    <ContactList @contactSelected="handleContactSelect" />
    <!-- 聊天界面组件 -->
    <ChatInterface :currentContact="currentContact" />
  </div>
</template>

<script>
// import ContactList from './chatList.vue';
import ChatInterface from './ChatInterface.vue';

export default {
  components: {
    ContactList,
    ChatInterface
  },
  data() {
    return {
      currentContact: null
    };
  },
  methods: {
    handleContactSelect(contact) {
      this.currentContact = contact;
    }
  }
};
</script>

<style scoped>
.app-container {
  display: flex;
  height: 100vh;
  width: 100%;
}

/* 修改选择器为组件标签名 */
ContactList {
  width: 10%; 
  border-right: 1px solid #e0e0e0;
  background-color: #f9f9f9;
  overflow-y: auto;
}

/* 修改选择器为组件标签名 */
ChatInterface {
  width: 90%; 
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}
</style>    